<template>
  <div>
    <van-nav-bar title="黑马头条" />
    <!--  引入第三方组件：
      1.查看文档，找到需要的组件
      2.根据文档要求，引入组件（全局引入，按需引入），注册组件
      3.根据对应需求，将代码复制到文件中
       正则，面试中常问的：
       手机号（1开头，第二位3-9，十一位）
       密码（数字，大小写字母，符号）
       邮箱
     -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="fromLogin.mobile"
        name="mobile"
        type="tel"
        label="手机号"
        placeholder="请输入手机号o~~"
        :rules="mabileRule"
      />
      <van-field
        v-model="fromLogin.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="codeRules"
      />
      <div style="margin: 16px">
        <van-button
          :loading="isloding"
          :disabled="isloding"
          loading-text="加载中"
          round
          block
          type="info"
          native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import { loginApi } from '@/api'
// 引入vuex 中异步获取数据的方法
import { mapActions } from 'vuex'
// 页面顶部消息展示提示
import { Notify } from 'vant'
export default {
  name: 'Login',
  data () {
    return {
      fromLogin: {
        mobile: '13888888888',
        code: '246810'
      },
      mabileRule: [
        {
          required: true,
          message: '请正确填写手机号┗|｀O′|┛ 嗷~~',
          trigger: 'onChange',
          pattern: /^1[3-9]\d{9}$/
        }
      ],
      codeRules: [
        {
          required: true,
          message: '请正确填写密码┗|｀O′|┛ 嗷~~',
          trigger: 'onChange',
          pattern: /^\d{6}$/
        }
      ],
      isloding: false
    }
  },
  methods: {

    // 在使用vuex 时 调用actions中的异步方法时，
    // 1.通过引入mapActions 然后在methods中展开此方法(...mapActions(['方法名']))，使用this.方法名（参数），调用actios中的方法
    // 2.或者在methods中 使用vuex挂载在vue实例上的 $store.dispatch（'方法名'，参数）
    ...mapActions(['syncLoginFn']),
    async onSubmit () {
      this.isloding = true // 发起请求时，按钮禁用
      try {
        // const res = await loginApi(this.fromLogin)
        // const { refresh_token, token } = res.data.data
        // console.log(refresh_token)
        // console.log(token)

        await this.syncLoginFn(this.fromLogin)
        this.isloding = false
        Notify({ type: 'success', message: '登陆成功啦' })

        // console.log(res)
      } catch (error) {
        console.log('手机号或验证码错误')
        this.isloding = false
        return Notify({ type: 'warning', message: '手机号或验证码错误' })
      }
      // console.log('submit', values)
      // this.$router.replace  方法也可以用来，跳转路由，路由重置，不可以回退，没有路由历史记录
      // this.$router.push  跳转路由，可以回退，存在路由历史记录
      // this.$router.replace('/layout')
      this.$router.replace({
        name: 'layout'
      })
      // this.$router.push({
      //   name: 'layout'
      // })
      // this.$router.push('layout')
    }
  }
}
</script>

<style lang="less" scoped>
//如果组件直接引用，并且组件上有自带的类名，那么就可以直接使用这个类名来改变组建的样式

// .van-nav-bar {
//   background-color: #057cff;
// }
// // 如果想改变组件里后代元素的样式，直接使用class是不生效的，
// //是由于组件内写了 scoped 打包时，会给dom添加自定义属性，造成样式隔离
// // 可以通过在类名前添加 /deep/ 实现类名穿透，改变子组件样式
// /deep/ .van-nav-bar__title{
//   color: #fff;
// }
//预处理器不同，使用的穿透符也不同 scss ::deep   stylus >>>
</style>
